<template>
  <view class="padding">
    <!-- 判断 MessageList 是否为空 -->
    <view v-if="MessageList.length === 0" class="no-message">
      <text>暂无消息</text>
    </view>
    <view v-else class="MessageList boder_r">
      <view class="item" >
        <!-- 分割线 -->
    <!--    <view class="flex_al_cen_ju_aro" v-if="item.lastMessageTime">
          <view class="Dividingline"></view>
          <view class="Dividinglinetime">{{ formatTimestamp(item.lastMessageTime) }}</view>
          <view class="Dividingline"></view>
        </view> -->
        <!-- 列表 -->
        <view
          class="list"
          v-for="(child, childindex) in MessageList"
          :key="childindex"
          @click="NavTo(`/pages/message/message?roomsName=${child.roomsName}&id=${child.orderId}`)"
        >
          <u-swipe-action :key="childindex">
            <u-swipe-action-item
              :index="childindex"
           
              @click.stop="action_item(index, childindex)"
            >
              <view class="flex_al_cen_ju_bet padd">
                <view class="avatar pos_r">
                  <u-badge
                    class="badge"
                    :show="true"
                    :absolute="true"
                    :offset="['-9rpx', '-14rpx']"
                    type="error"
                    max="99"
                    :value="child.unreadCount"
                  ></u-badge>
                  <image
                    class="boder_r pos_a"
                    :src="child.image"
                    mode="scaleToFill"
                  />
                </view>
                <view class="MSG">
                  <view class="flex_al_cen_ju_bet">
                    <text class="name">#{{ index }} {{ child.roomsName }}</text>
                    <text class="time">{{ formatTimestamp(child.lastMessageTime) }}</text>
                  </view>
                  <view class="desc text_ovf">{{ child.lastMessage }}</view>
                </view>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </view>
      </view>
    </view>
  </view>
  <u-toast ref="uToast"></u-toast>
</template>
<script setup lang="ts">
import * as $homeHttp from "@/utlis/interface/home";
import { NavTo, RediTo, Toast } from "@/utlis/uni_api";
import {
  ref,
  reactive,
  onMounted,
  defineProps,
  defineEmits,
  getCurrentInstance,
} from "vue";

const { proxy } = getCurrentInstance();
import { useWebSocket } from "@/Hooks/chat/chat.js";

// 滑动单元格删除
const options = reactive([
  {
    name: "delete",
    text: "删除",
    style: {
      backgroundColor: "red",
      color: "#fff",
      width: "100rpx",
    },
  },
]);
// 格式化时间戳的方法
const formatTimestamp = (timestamp: number): string => {
  const date = new Date(timestamp); // 将时间戳转换为 Date 对象
  const hours = String(date.getHours()).padStart(2, "0"); // 获取小时并填充为两位
  const minutes = String(date.getMinutes()).padStart(2, "0"); // 获取分钟并填充为两位
  return `${hours}:${minutes}`; // 返回格式化后的时间字符串
};
const MessageList = reactive([]);
const getinfoList = () => {
  $homeHttp
    .infoList(
      {
        type: "wms_sy",
      },
      proxy
    )
    .then((res) => {
      if (res.code === 0) {
        MessageList.push(...res.data); // 使用 push 将数据插入
      }
    });
};

onMounted(() => {
  getinfoList();
});
</script>
<style scoped lang="scss">
@import "@/static/css/Message/Message.scss";
.no-message {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 18px;
  color: #888;
}
</style>
